<template>
    <el-container>
        <el-header>
            <span style="font-size:30px"><b>新龙生态林套票系统：核销</b></span>
            <br/><br/>
            <el-input placeholder="请输入手机号" style="width:40vh;margin-bottom:20px" v-model="phoneNum"/>
            <br/>
            <el-button @click="searchTicket()" type="primary">查询</el-button>
            <br/><br/>
            <span v-if="!!userInfo.phoneNum" style="color:red"><b>正在查询的手机号：{{userInfo.phoneNum}}</b></span>
        </el-header>
        <el-main>
            <el-table
                :data="userInfo.Info"
                style="width:60%;margin:auto"
                border
            >
                <el-table-column
                    prop="project"
                    align="center"
                    label="项目"
                >
                </el-table-column>
                <el-table-column
                    prop="num"
                    align="center"
                    label="数量"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    label="核销"
                >
                    <template #default="{row}">
                        <el-button @click="veriInfo= row; dialogVeri= true" type="primary">核销</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            design by wys
        </el-footer>
        <el-dialog
        title="输入操作员密码"
        v-model="dialogVisible"
        width="30%"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :show-close='false'
        >
            <el-input v-model="tempPwd" placeholder="请输入" style="margin:5px"/>
            <span v-if="message" style="color:red">{{message}}</span>
            <br/>
            <el-button style="margin:5px" @click="checkpwd()" type="primary">确认</el-button>
            <br/><br/>
            <span style="font-size:12px">其他角色：</span>
            
                <router-link to="/seller">
                    <el-button style="margin:5px" size="small">售票</el-button>
                </router-link>
        </el-dialog>
        <el-dialog
        title="确认核销"
        v-model="dialogVeri"
        width="30%"
        :show-close='false'
        >
            <span><b>手机号：{{userInfo.phoneNum}}</b></span>
            <br/>
            <span><b>项目：{{veriInfo.project}}</b></span>
            <br/>
            <span><b>数量：{{veriInfo.num}}</b></span>
            <br/><br/>
            <el-button style="margin:5px" @click="veriTick()" type="danger">确认</el-button>
        </el-dialog>
    </el-container>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted} from 'vue';
import axios from 'axios'

export default {
    name: 'operator',
    setup() {
        const exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/
        const data = reactive({
            page: 'Operator' as string,
            message: '' as string,
            dialogVisible: true as boolean,
            dialogVeri: false as boolean,
            tempPwd: '' as string,
            phoneNum: '' as string,
            userInfo: {
                phoneNum: '' as string,
                Info: [] as any,
            } as any,
            veriInfo: {} as any,
        })

        const methods = reactive({
            checkpwd:() => {
                if(data.tempPwd == data.password.find((item: any) => item.Name == data.page)?.Password){
                    data.dialogVisible = false
                } else {
                    data.message = '密码错误'
                }
            },
            searchTicket:() => {
                if(!exp.test(data.phoneNum) || !data.phoneNum){
                    window.alert('请输入正确的手机号')
                    return
                }
                axios({
                    url: '/api/infoSearch',
                    method: 'post',
                    data:{
                        phoneNum: data.phoneNum,
                    },
                    headers:{
                        'Content-Type' : "application/json"
                    }
                }).then((res: any) => {
                    if(res.data.data.length == 0){
                        window.alert('未查询到该手机号的信息')
                        return
                    }
                    data.userInfo.phoneNum = res.data.data[0].PhoneNumber
                    delete res.data.data[0].PhoneNumber
                    data.userInfo.Info = Object.keys(res.data.data[0]).map((item: any) => {
                        return {
                            project: item,
                            num: res.data.data[0][item]
                        }
                    })
                }).catch((err: any) => {
                    window.alert(err)
                })
            },
            veriTick:() => {
                if(data.veriInfo.num == 0){
                    window.alert('该项目无剩余票')
                    return
                }
                axios({
                    url: '/api/infoChange',
                    method: 'post',
                    data:{
                        phoneNum: data.userInfo.phoneNum,
                        project: [
                            {
                                name:data.veriInfo.project,
                                num:data.veriInfo.num - 1
                            }
                        ]
                    },
                    headers:{
                        'Content-Type' : "application/json"
                    }
                }).then(() => {
                    data.dialogVeri = false
                    methods.searchTicket()
                }).catch((err: any) => {
                    window.alert(err)
                    data.dialogVeri = false
                    methods.searchTicket()
                })
            }
        })

        onMounted(() => {
            return new Promise((resolve, reject) => {
                axios({
                    url: '/api/password',
                    method: 'get'
                }).then((res: any) => {
                    data.password = res.data.data
                    resolve(true)
                }).catch((err: any) => {
                    console.log(err)
                    reject(false)
                })
            })
        })
        return {
            ...toRefs(data),
            ...toRefs(methods)
        }
    },
}
</script>

<style>
.el-header{
    padding: 10px;
    height: 25vh;
}
.el-main {
    height: 68vh;
}
.el-footer {
    padding: 20px;
    height: 7vh;
}
</style>